<template>
  <div class="personal">
    <div class="user">
      <div class="info">
        <img src="@/assets/user/huiyuan.png" alt="" />
        <div class="user-name">会员尊享</div>
      </div>
      <div
        class="item"
        v-for="(item, index) in userList"
        :key="index"
        @click="listFn(index)"
      >
        <div class="item-img">
          <img :src="item.active ? item.icon2 : item.icon1" alt="" />
        </div>
        <div class="item-title">
          <div>
            {{ item.title }}
          </div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="user-content">
      <div class="content-top">
        <img src="" alt="" />
        <div class="top-title">EV剪辑-会员充值</div>
      </div>
      <div class="pay-info">
        <div class="pay-list">
          <div class="list-title">
            1、选择开通时长：<span>（如需团购会员，请联系客服）</span>
          </div>
          <div class="list">
            <div
              class="list-item"
              :class="{ active: item.active }"
              v-for="(item, index) in payList"
              :key="index"
            >
              <div class="item-num">
                <span class="num">298</span> <span>元</span>
              </div>
              <div class="item-type">< 1元/月</div>
              <div class="item-class">终身</div>
            </div>
          </div>
        </div>
        <div class="pay-list">
          <div class="list-title">
            2、选择支付方式
            <div class="reader">
              <input type="checkbox" />已阅读并同意《会员开通协议》
            </div>
          </div>
          <div class="list">
            <div class="pay-type"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, ref } from "vue";
import img1 from "@/assets/user/1.png";
import img11 from "@/assets/user/1-1.png";
import img2 from "@/assets/user/2.png";
import img22 from "@/assets/user/2-2.png";
import img3 from "@/assets/user/3.png";
import img33 from "@/assets/user/3-3.png";
import img4 from "@/assets/user/4.png";
import img44 from "@/assets/user/4-4.png";
import img5 from "@/assets/user/5.png";
import img55 from "@/assets/user/5-5.png";
let data = reactive({
  userList: [
    {
      title: "导出无水印",
      desc: "导出无“EV剪辑”水印",
      icon1: img1,
      icon2: img11,
      active: true,
      temp: "account",
    },
    {
      title: "自定义分辨率",
      desc: "根据需求自定合适的分辨率",
      icon1: img2,
      icon2: img22,
      temp: "equipment",
    },
    {
      title: "码特率调整",
      desc: "数值越大画面清晰度越高",
      icon1: img3,
      icon2: img33,
      temp: "vip",
    },
    {
      title: "多轨道剪辑",
      desc: "支持多轨道剪辑、叠加视频",
      icon1: img4,
      icon2: img44,
      temp: "news",
    },
    {
      title: "视频配音",
      desc: "能为视频二次配音",
      icon1: img5,
      icon2: img55,
      temp: "invoice",
    },
  ],
  payList: [
    {
      num: "111",
      type: "＜1元/月",
      class: "终身",
      active: true,
    },
    {
      num: "36",
      type: "12元/月",
      class: "3个月",
    },
    {
      num: "68",
      type: "<12元/月",
      class: "6个月",
    },
    {
      num: "96",
      type: "8元/月",
      class: "1年",
    },
  ],
});
let { userList, payList } = toRefs(data);
let tempTitle = ref("account");
function listFn(key) {
  userList.value.forEach((item, index) => {
    if (index == key) {
      item.active = true;
      tempTitle.value = item.temp;
    } else {
      item.active = false;
    }
  });
}
</script>

<style lang="less">
.personal {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  .user {
    width: 240px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    padding: 10px 0;
    .info {
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      margin-left: 12px;
      font-size: 16px;
      color: #333;
      letter-spacing: 0;
      img {
        width: 48px;
        height: 48px;
      }
      .user-name {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #666;
        letter-spacing: 0;
        margin-bottom: 10px;
      }
    }
    .item {
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #f0f0f0;
      padding-left: 20px;
      .item-img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        line-height: 20px;
        font-size: 14px;
        color: #666;
        .desc {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
  .user-content {
    min-height: 569px;
    background: #fff;
    border-radius: 5px;
    position: relative;
    width: 926px;
    margin-left: 20px;
    .content-top {
      display: flex;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 22px;
      img {
        width: 36px;
        height: 36px;
        margin-left: 44px;
        margin-right: 10px;
      }
      .top-title {
        font-family: 微软雅黑;
        font-size: 16px;
        color: #666;
        letter-spacing: 0;
        cursor: pointer;
      }
    }
    .pay-info {
      padding: 0 45px;
      display: flex;
      flex-direction: column;
      .pay-list {
        font-family: 微软雅黑;
        font-size: 14px;
        color: #333;
        letter-spacing: 0;
        margin-top: 22px;
        .list-title {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          span {
            font-size: 12px;
            color: #999;
          }
          .reader {
            font-size: 14px;
            color: #999;
            margin-left: 20px;
          }
        }
        .list {
          .pay-type {
            width: 116px;
            height: 140px;
            cursor: pointer;
            margin-top: 4px;
            background-image: url("../../assets/weixinPay.png");
            background-size: 116px 140px;
            // background-position: center center;
            // /* 背景图不平铺 */
            // background-repeat: no-repeat;
            // /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            // background-attachment: fixed;
            // /* 让背景图基于容器大小伸缩 */
            // background-size: cover;
          }
          .list-item {
            width: 117px;
            height: 128px;
            float: left;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            margin-right: 20px;
            margin-top: 4px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item-num {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #7f7f7f;
              letter-spacing: 0;
              line-height: 42px;
              margin: 15px;
              .num {
                line-height: 42px;
                text-align: center;
                font-family: PingFangSC-Light;
                font-size: 30px;
                color: #ffa000;
                letter-spacing: 0;
                margin: 10px auto 5px;
              }
            }
            .item-type {
              text-align: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #7f7f7f;
              letter-spacing: 0;
              margin-top: -15px;
              margin-bottom: 20px;
            }
            .item-class {
              height: 100%;
              width: 100%;
              text-align: center;
              border-top: 1px dashed #e5e5e5;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #333;
              letter-spacing: 0;
              margin: 0 auto;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .active {
            background: url();
            background-size: 117px 128px;
            border: none;
          }
        }
      }
    }
  }
}
</style>
